<!DOCTYPE html>
<html>
	<head>
	  	<meta charset="UTF-8">
		<script src="../../public/js/tmpl.js"></script>
		<script>
			var content = template('Phead_resource', {
				title: '订单信息'
			});
			document.write(content);
		</script>
	</head>
	<body class="wrap_bg openCard">
		
		<header>
			<div class="padding10 ">
				<h1 class="color-white am-text-center">请确认订单信息</h1>
			</div>
		</header>
		
		<section class="cont_info">
			
		</section>
		
		<!--底部按钮-->
		<footer class="footer_nav">
			<p class="am-text-center padding10 active_bg color-white am-block bottom_btn">
				<span class="am-text-sm">支付</span>
			</p>
		</footer>
		
		<script>
			var content = template('progress_status', {});
			document.write(content);
		</script>
		
		<script>
			var content = template('Pfoot_resource', {});
			document.write(content);
		</script>
		<script src="../../public/js/url.min.js"></script>
		<script id="data_info" type="text/html">
			
			<ul class="ul_box am-text-sm  bgs0 marginb10">
				<li class="li_item border-bottom-grey padding-v10 am-cf">
					<span class="am-fl color-white">健身仓名称 </span>
					<span class="am-fr color-white">{{info.name}}</span>
				</li>
				<li class="li_item border-bottom-grey padding-v10 am-cf">
					<span class="am-fl color-white">锻炼时间 </span>
					<div class="am-fr" >
						<span class="color-white" id="selDay">{{info.date_time}}</span>
						<span class="am-icon-angle-right am-icon-fw color-white"></span>
					</div>
				</li>
				<li class="li_item border-bottom-grey padding-v10 am-cf">
					<span class="am-fl color-white">起始时间 </span>
					<div class="am-fr">
						<span class="color-white" id='sel_soltTime'>{{info.time_slot}}</span>
						<span class="am-icon-angle-right am-icon-fw color-white"></span>
					</div>
				</li>
				<li class="li_item  padding-v10 am-g">
					<span class="am-u-sm-3 color-white padding0">健身仓地址 </span>
					<span class="am-u-sm-9 color-white padding0">{{info.address}}</span>
				</li>
			</ul>
			
			<ul class="ul_box am-text-sm margint10 bgs0">
				<li class="li_item border-bottom-grey padding-v10 am-cf">
					<span class="am-fl color-white">优惠券 </span>
					<a href="../personalCenter/Coupon.html" class="am-fr">
						<span class="color-white">{{info.numOf_cashCoupon}}张可用</span>
						<span class="am-icon-angle-right am-icon-fw color-white"></span>
					</a>
				</li>
				<li class="li_item padding-v10 am-cf">
					<span class="am-fl color-white">总价 </span>
					<span class="am-fr active_color "><span class="total_price">{{info.still_pay}}</span>元</span>
				</li>
			</ul>
			
			<!--<p class="am-text-center bottom_tip">
				温馨提示: {{info.tip}}
			</p>-->
		</script>
		
		<script type="text/javascript">
		
			(function($, arttmpl){
			
				
				
				var info = {
					name:'燃脂搏击',
					date_time:'10月18日 ',
					time_slot:'16:10-17:10',
					address:'杭州市上城区建国路228号钱江时代大厦对面莲花超市旁杭州市第二人民医院',
					numb_Of_personels:[
						{num:'1',price:'69'},
						{num:'2',price:'138'},
						{num:'3',price:'207'}
					],
					total_price:'69',
					card_isOPen:false,
					discount_price:'69',
					numOf_cashCoupon:0,
					still_pay:'69',
					tip:'开始时间前6个小时前取消预约，住房金额退款；开始时间前6个小时后取消预约，不支持退款。'
				}
			
				var drawInfo = function(data){
					var d = {
						info:data
					};
					
					var content =arttmpl('data_info', d);
					$('.cont_info').html(content);
					
					
					/*绑定事件*/
					//选择日期
					selDay('#selDay');
					
					//选择时间段
					sel_soltTime('#sel_soltTime');
					
//					var btns = $('.cont_info').find('.btnState_group button');
//					
//					btns.click(function(){
//						
//						var i = btns.index($(this))+1;
//						var price = $(this).attr('data-price');
//						var $price = $('.cont_info').find('.total_price');
//						
//						$(this).addClass('on').siblings('button').removeClass('on');
//						
//						$price.html(price);
//						
//					});
				}
				
				/*成功回调*/
				var successcallback_Info = function(res){
					drawInfo(res);
				}
				
				/*失败回调*/
				var errorcallback = function(statuscode, statusmsg) {
					console.log(statuscode + "  " + statusmsg);
				};
				/*失败回调*/
				var faildcallback = function(xhr, errtype, errthow) {
					console.log(xhr.readyState + "  " + xhr.status + "  " + xhr.statusText);
				};
				
				/*请求数据*/
				var getInfo = function(op, sucessCallback, errorcallback, faildcallback){
					request('url', 't', 'd', info, sucessCallback, errorcallback, faildcallback);
				}
				
				var init = function(){
					getParam();
					
					getInfo('op', successcallback_Info, errorcallback, faildcallback);
					
					var $modal = $('#my-modal-loading');
					$modal.hide();
				}
				
				init();
				
				
				//选择日期
				function selDay(str){
					
					var sel_time = '';
					
					var cur = current('月');
					var dayArr=[];
					cur.forEach(function(item, index){
						dayArr.push(item.d+'日')
					});
					
					var mobileSelect3 = new MobileSelect({
					    trigger: str,
					    title: '选择日期',
					    ensureBtnColor:'#d95d80',
					    cancelBtnColor:'#d95d80',
					    wheels: [
					                {data: dayArr}
					            ],
					    position:[0, 10, 0], 
					    transitionEnd:function(indexArr, data){
					    },
					    callback:function(indexArr, data){
					    	sel_time = data;
					    }
					})
				};
				
				//选择时间段
				function sel_soltTime(str){
				
					var triggerNum = 0;
					var start_time = '';
					var end_time = '';
					
					
					var numArr1=['凌晨0点','凌晨1点','凌晨2点','凌晨3点','凌晨4点','凌晨5点','凌晨6点','早上7点','早上8点','早上9点','上午10点','上午11点','中午12点','中午13点','下午14点','下午15点','下午16点','下午17点','下午18点','晚上19点','晚上20点','晚上21点','晚上22点','晚上23点'];
					var numArr2=['00分','10分','20分','30分','40分','50分'];
					
					var mobileSelect3 = new MobileSelect({
					    trigger: str,
					    title: '开始时间',
					    ensureBtnColor:'#d95d80',
					    cancelBtnColor:'#d95d80',
					    wheels: [
					                {data: numArr1},
					                {data: numArr2}
					            ],
					    position:[6, 0], 
					    transitionEnd:function(indexArr, data){
					    },
					    callback:function(indexArr, data){
					    
					    		
					    	
					    	if(triggerNum==0){ 
					    		start_time = data;
					    		var T = setTimeout(function(){
						    		
						    		mobileSelect3.setTitle('结束时间');
		//				    		mobileSelect3.updateWheel(0,numArr1);
						    		mobileSelect3.show();
						    		
						    		clearTimeout(T);
						    		
						    	},500);
						    }	
						    
						    if(triggerNum==1){end_time = data};
						    
					    	triggerNum++;
					    	
					    	
					    	//再次触发选择时间
					    	if(triggerNum==2){
					    		mobileSelect3.setTitle('开始时间');
					    		triggerNum=0;
//					    		window.location = '../ReservationSite/order_info.html';
					    		alert(start_time+"///"+end_time);
					    	};
	//				       $trigger.html('自助健身')
					    }
					});
				}
				
				//获得页面地址带的参数
				function getParam(){
					
					var start_timeArr = url("?start_time").split(',');
					var end_timeArr = url("?end_time").split(',');
					
					var start_time = start_timeArr[1].replace(/[^0-9]+/g, '')+':'+start_timeArr[2].replace(/[^0-9]+/g, '');
					var end_time = end_timeArr[1].replace(/[^0-9]+/g, '')+':'+end_timeArr[2].replace(/[^0-9]+/g, '');
					
					info.date_time = start_timeArr[0]+'日';
					info.time_slot = start_time+'-'+end_time;
					
					
					console.log(info.date_time);
					console.log(info.time_slot);
					
				}
				
			})(jQuery, template);
		
			$(function(){
				$('.bottom_btn').click(function(){
					window.location='../common/register.html'
				})
			});
			
			
			
			
		</script>
	</body>
</html>
